<template>
    <div style="width: 100%; height: 100%;" ref="chart"></div>
</template>
<script>

import * as echarts from "echarts";
import Cookies from "js-cookie";
import request from "@/utils/request";
import moment from 'moment';

export default {
    comments: "polygonometry", // 组件名称
    data() {
        return {
            chartData: null, // 图表数据
        };
    },
    methods: {
        async getData(userId) { // 获取数据
            const startDate = moment().subtract(1,'week').add(1,'day').format('YYYY-MM-DD'); // 开始日期
            console.log(startDate);
            const endDate = moment().subtract('day').format('YYYY-MM-DD'); // 结束日期
            console.log(endDate);
            const { data: res } = await request.get(`/views/getBorrowData?userId=${userId}&startDate=${startDate}&endDate=${endDate}`); // 发送请求获取数据
            this.chartData = res; // 将获取到的数据赋值给chartData
            console.log(this.chartData);
            this.echartsInit(); // 初始化图表
        },
        echartsInit() { // 初始化图表
            const chartData = this.chartData;
            if (!chartData) {
                return;
            }
            const xAxisData = chartData.map((item) => moment(item.borrowDate).format('MM-DD')); // x轴数据
            const seriesData = chartData.map((item) => item.count); // y轴数据
            this.chartInstance = echarts.init(this.$refs.chart, null, { responsive: true }); // 初始化echarts实例
            this.chartInstance.setOption({
                backgroundColor: '#FFF',
                title: [
                    {
                        text: "一周借阅数据",
                        left: "45%",
                        textStyle: {
                            fontSize: 16,
                            color: "black",
                        },
                    }
                ],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: "#e5e5e5"
                            }
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: "#8c8c8c"
                            }
                        },
                        data: xAxisData // x轴数据
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        text: "图书借阅分类",
                        axisLine: {
                            show: false,
                            lineStyle: {
                                color: "#e5e5e5"
                            }
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: "#8c8c8c"
                            },
                            formatter: '{value}' // 取消显示小数
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            show: false
                        }
                    }
                ],
                series: [
                    {
                        name: '借阅次数',
                        type: 'line',
                        showSymbol: false,
                        color:['#76A8F8'],
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#76A8F8'
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(118,168,248, 0)'
                                }
                                ], false),
                                shadowColor: 'rgba(118,168,248, 0.9)',
                                shadowBlur: 20
                            }
                        },
                        data: seriesData // y轴数据
                    }
                ]
            });
        },
    },
    mounted() {
        const user = JSON.parse(Cookies.get('user')); // 获取用户信息
        const userId = user.id; // 获取用户id
        this.getData(userId); // 获取数据
    }
}
</script>

<style></style>